<template>
  <div>
    <div v-if="!hasData" class="tips">暂无结果</div>
  <div class="classeswrapper" v-if="hasData">
    <div class="moco-classeswrapper" @click="goDetail($event)">
      <div
        v-for="(item,index) in classinfo"
        class="classwrapper"
        :key="index"
      >
        <div class="imgwrapper">
          <img :src="item.classImg" style="width:100%"
               :data-index="item.classNo" :data-people="item.people"/>
        </div>
        <div class="title">{{item.className}}</div>
        <div class="middle">
          <div class="degree">{{classdegree[item.classLevel]}}</div>
          <div class="people iconfont">&#xe6a9;&nbsp;{{item.people}}</div>
        </div>
        <div class="introduction">{{item.introduction}}</div>
      </div>
    </div>
    <br clear="all" />
    <div class="block" v-show="pages!== 10">
      <el-pagination
        layout="prev, pager, next"
        :total="pages"
        :current-page.sync="currentPage"
        @current-change="changePage">
      </el-pagination>
    </div>
  </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'searchResult',
  data () {
    return {
      classinfo: [],
      classdegree: ['全部', '一级', '二级', '三级'],
      classkind: ['全部', '商务日语', '口语', '听力'],
      pages: 10,
      currentPage: 1,
      hasData: false
    }
  },
  computed: {
    ...mapState({
      search: 'search'
    })
  },
  methods: {
    goDetail (event) {
      let classNo = event.target.dataset.index
      let people = event.target.dataset.people
      this.$router.push({path: '/courseDetail', query: {classNo, study: people}})
    },
    changePage () {
      this.getData(this.currentPage)
    },
    getData (page) {
      let api = this.ports.search.result + '?keyWord=' + this.$route.query.keyWord + '&page=' + page
      if (page === 0) {
        api = this.ports.search.result
      }
      this.http.get(api,
        res => {
          if (res.status === 200) {
            let data = res.data.result
            if (data.code === 200) {
              if (data.pages == null) {
                this.hasData = false
              } else {
                this.classinfo = data.msg
                this.pages = data.pages * 10
                this.hasData = true
                if (this.newsData.length === 0) {
                  this.getData(data.pages)
                }
              }
            } else if (data.code === 1 || data.code === -1) {

            }
          } else {
            console.log(res)
          }
        })
    }
  },
  watch: {
    search: function (val) {
      if (val) {
        this.getData(1)
      }
    }
  },
  mounted () {
    this.getData(this.currentPage)
  }
}
</script>

<style lang="scss" scoped>
  .classwrapper {
    width: 216px;
    margin-left: 18px;
    color: #93999f;
    font-size: 12px;
    float: left;
    margin-bottom: 0.3rem;
    margin-top: 50px;
  }
  .classwrapper:hover .title{
    color: #f20d0d;
  }
  .classeswrapper {
    margin: 0 auto 50px auto;
  }
    .classeswrapper {
      width: 1386px;
    }
    .selectwrapper {
      width: 1386px;
    }
    .moco-classeswrapper {
      width: 1500px;
      margin-top: 30px;
      height: 310px;
    }
  .imgwrapper{
    width: 216px;
    height: 122px;
    cursor: pointer;
    background: #9199a1;
    border-radius: 8px;
    img{
      border-radius: 8px;
    }
  }
  .title {
    height: 0.4rem;
    line-height: 0.4rem;
    font-size: 14px;
    font-weight: 700;
    font-family: "微软雅黑";
    color: #1c1f21;
    padding: 0 0.1rem;
  }
  .classwrapper .middle {
    height: 0.35rem;
    line-height: 0.35rem;
    padding: 0 0.1rem;
  }
  .degree {
    float: left;
    width: auto;
    height: 100%;
  }
  .people {
    float: left;
    width: auto;
    height: 100%;
    margin-left: 0.2rem;
  }
  .introduction {
    padding: 0 0.1rem;
    margin-top: 0.1rem;
    text-align: justify;
    line-height: 20px;
    display: -webkit-box; /** 将对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 3; /** 显示的行数 **/
    overflow: hidden; /** 隐藏超出的内容 **/
  }
  .block {
    text-align: center;
    margin-bottom: 50px;
    margin-top: 30px;
  }
  .tips {
    text-align: center;
    padding-top: 300px;
  }
</style>
